<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中事件学习</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 事件嵌套，事件冒泡 -->
			<!-- .stop阻止事件冒泡 -->
				<div @click="addNum2">
					<h3>{{num}}</h3>
					<button @click.stop="addNum">增1</button>
				</div>
				
				<hr />
				<!-- 阻止默认行为 -->
				<div>
					<h3>阻止默认行为</h3>
					<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
				</div>
				
				<hr />
				<div>
					<h3>特殊按键说明</h3>
					 <!-- 回车键 --><h1>回车键</h1>
					用户名：<input name="username" type="text" 
					v-on:keyup.enter="handler"/><br />
					<!-- 删除键 --><h1>删除键</h1>
				    用户名：<input name="username" type="text" 
					v-on:keyup.delete="handler"/><br />
					<!-- 空格键 --><h1>空格键</h1>
					用户名：<input name="username" type="text"
					@keyup.space="handler"/><br>
					<!-- 用户名：<input name="username" type="text"
					@keydown.tab="handler"/> -->
					</div>
					
		</div>
		<script src="../js/vue.js"></script>
		<script>
			
			const app=new Vue({
				el:"#app",
				data:{
				num:1
				},
				methods:{
					addNum(){
						this.num++
					},
					addNum2(){
						this.num+=2
					},
					baidu(){
						console.log("点击百度按钮")
					},
					handler(){
						console.log("函数被执行")
					}
				}
			})
		</script>
	</body>
</html>
